<template>

  <div class="common-layout"  style="background-color: #F1FAEE;width: 100%;height: 100%" >

    <el-container >

        <div class="header"></div>

     <el-aside style="max-width: 12%">
       <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
       <label for="openSidebarMenu" class="sidebarIconToggle">
         <div class="spinner diagonal part-1"></div>
         <div class="spinner horizontal"></div>
         <div class="spinner diagonal part-2"></div>
       </label>
       <div id="sidebarMenu">
         <ul class="sidebarMenuInner">
           <li><router-link to="/" class="router-link">首页</router-link></li>
           <li><router-link to="/main" class="router-link" ref="ref1">小助手1.5</router-link></li>
           <li><router-link to="/chat3" class="router-link" ref="ref2">小助手3.5</router-link></li>
           <li><router-link to="/heart" class="router-link" ref="ref4">Ai心理咨询</router-link></li>
           <li><router-link to="/ppt" class="router-link" ref="ref3">AIPPt生成</router-link></li>
           <li><router-link to="/article" class="router-link">发布文章</router-link></li>
           <li><router-link to="/list" class="router-link" ref="ref5">教程文章</router-link></li>
           <li><router-link to="/user" class="router-link" ref="ref6">个人设置</router-link></li>
           <li><router-link to="/login" class="router-link" >登录注册</router-link></li>
           <li><p style="color: #F1FAEE"  @click="open=true"> 新手引导</p></li>
           <li><p style="color: #F1FAEE" @click="exit"> 退出登录</p></li>
         </ul>
       </div>
     </el-aside>

<!--  <div id='center' class="main center">-->
<!--    <div class="mainInner">-->
<!--      <h1>-->
<!--        Welcome-->
<!--      </h1>-->
<!--      <h2>to</h2>-->
<!--    <h3>   Xfee</h3>-->
<!--      </div>-->
<!--  </div>-->


<el-main style="margin-top: 1%;margin-right:0%;height: 100%">
  <router-view></router-view>

</el-main>


    </el-container>
  </div>
  <el-tour v-model="open">
    <el-tour-step :target="ref1?.$el" title="小助手1.5">
      <img
          style="width: 50px"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          alt="tour.png"
      />
      <div>小助手基础版本点击使用</div>
    </el-tour-step>
    <el-tour-step
        :target="ref2?.$el"
        title="小助手3.5"
        description="响应更快 范围更广 答案更精准"
    />
    <el-tour-step
        :target="ref3?.$el"
        title="PPT生成"
        description="不会做ppt?Xfee帮你一键生成"
    />
    <el-tour-step
        :target="ref4?.$el"
        title="心理咨询"
        description="Ai心理辅导 吐露您的心声 保护您的隐私"
    />
    <el-tour-step
        :target="ref5?.$el"
        title="文章教程"
        description="来看看大佬的文章吧"
    />
    <el-tour-step
        :target="ref6?.$el"
        title="个人设置"
        description="点击此处进行个人账户的管理"
    />
  </el-tour>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue'
const open = ref(false)
import router from "@/utils/router.js";
import {ButtonInstance} from "element-plus";
import axios from "axios";
const ref1 = ref<ButtonInstance>()
const ref2 = ref<ButtonInstance>()
const ref3 = ref<ButtonInstance>()
const ref4 = ref<ButtonInstance>()
const ref5 = ref<ButtonInstance>()
const ref6 = ref<ButtonInstance>()

const exit=()=>{
  localStorage.clear()
  router.push('/login')
}
const imgurl=ref("");
const userinfo=()=>{
  axios.get("/user/userInfo").then(result=>{
    return  imgurl.value=result.data.data.userPic
  }).catch(err=>{
    return err
  })
}
onMounted(()=>{
  userinfo()

})

const ripples=ref([])
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
  overflow-x: hidden;
  height: 100%;
}
body {
  background: #fff;
  padding: 0;
  margin: 0;
  font-family: 'Varela Round', sans-serif;
}
.header {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  background :#778899;
  position: fixed;
  height: 50px!important;
  overflow: hidden;
  z-index: 10;
}
.main {
  width: auto;
  display: block;
  height: 100%;
  margin: 60px auto ;
}
.mainInner{
  display: table;
  height: 100%;
  text-align: center;
}

.mainInner div{
  display:table-cell;
  vertical-align: middle;
  font-size: 3em;
  font-weight: bold;
  letter-spacing: 1.25px;
}
#sidebarMenu {
  height: 100%;
  position: fixed;
  left: 0;
  width:10%;
  margin-top: 50px;
  transform: translateX(-250px);
  transition: transform 250ms ease-in-out;
  background: linear-gradient(180deg, #a5d377 0%, #8c9cee 100%);
}
.sidebarMenuInner{
  text-align: center;
  margin:0;
  padding:0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
  transform: translateX(0);
}

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}
.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 22px;
  left: 15px;
  height: 22px;
  width: 22px;
}
.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}
.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}
.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}
* {
  margin: 0;
  padding: 0;
  text-decoration: none; /* 去除默认的下划线 */
  outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
  color: #000;	/* 去除默认的颜色和点击后变化的颜色 */
  font-family: '微软雅黑'
}
//动画
.router-link{
  width: 100%;
  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.el-menu-item {
  //background-color: #778899 !important;
}
h3{

  margin-top: 8%;
}

.navbar {
  display: flex;
  justify-content: space-between;

}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.title {
  display: inline-block;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #c0c3ef;
}

::-webkit-scrollbar-thumb {
  background: #f1e5e5;
}

::-webkit-scrollbar-thumb:hover {
  background: #39aad9;
}
body {
  background: #EEE;
  overflow-x:hidden;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.container {
  position: relative;
  margin: 0px auto;
  padding: 50px 0;
  clear: both;
}
@media only screen and (min-width: 1200px) {
  .container {
    width: 1210px;
  }
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .container {
    width: 1030px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container {
    width: 682px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 428px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 479px) {
  .container {
    width: 320px;
    margin: 0 auto;
  }
}



.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*height: 100px;*/
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;

  /* == */
  width: 250px;
  /* == */
}
.mcd-menu li {
  position: relative;
  /*float:left;*/
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  /*text-align: center;
  border-right: 1px solid #E7E7E7;*/

  /* == */
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #EEE;
  /* == */
}
.mcd-menu li a i {
  /*display: block;
  font-size: 30px;
  margin-bottom: 10px;*/

  /* == */
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
  /* == */

}
/* == */
.mcd-menu li a p {
  float: left;
  margin: 0 ;
}
/* == */

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;

  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
  opacity: 1;
  -webkit-animation: moveFromTop 300ms ease-in-out;
  -moz-animation: moveFromTop 300ms ease-in-out;
  -ms-animation: moveFromTop 300ms ease-in-out;
  -o-animation: moveFromTop 300ms ease-in-out;
  animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
  opacity: 1;
  -webkit-animation: moveFromLeft 300ms ease-in-out;
  -moz-animation: moveFromLeft 300ms ease-in-out;
  -ms-animation: moveFromLeft 300ms ease-in-out;
  -o-animation: moveFromLeft 300ms ease-in-out;
  animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
  opacity: 1;
  -webkit-animation: moveFromRight 300ms ease-in-out;
  -moz-animation: moveFromRight 300ms ease-in-out;
  -ms-animation: moveFromRight 300ms ease-in-out;
  -o-animation: moveFromRight 300ms ease-in-out;
  animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  /*border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;*/
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;

  /* == */
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
  /* == */
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  /*top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/

  /* == */
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* == */
}

/* == */
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(200%);
    -moz-transform: translateY(200%);
    -ms-transform: translateY(200%);
    -o-transform: translateY(200%);
    transform: translateY(200%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@-webkit-keyframes moveFromLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes moveFromRight {
  from {
    opacity: 0;
    -webkit-transform: translateX(-200%);
    -moz-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    -o-transform: translateX(-200%);
    transform: translateX(-200%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}



.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*border-top: 4px solid #e67e22;*/
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  /*top: 130px;*/
  z-index: 1000;

  /* == */
  left:280px;
  top: 0px;
  border-left: 4px solid #e67e22;
  /* == */
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/

  /* == */
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  /*top: 100px;*/

  /* == */
  left:250px;
  /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;

  /* == */
  height: auto;
  /* == */
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  /*left: -14px;*/
  /* == */
  left: -9px;
  /* == */
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}



/*.mcd-menu li.float {
  float: right;
}*/
.mcd-menu li a.search {
  /*padding: 29px 20px 30px 10px;*/
  padding: 10px 10px 15px 10px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;

  /* == */
  width:170px;
  float:left;
  /* == */
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  /*padding: 10px;*/
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;

  /* == */
  float:left;
  padding: 10px 10px 11px 10px;
  /* == */
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}


.search-mobile {
  display:none !important;
  background:#e67e22;
  border-left:1px solid #e67e22;
  border-radius:0 3px 3px 0;
}
.search-mobile i {
  color:#FFF;
  margin:0 !important;
}


@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .mcd-menu {
    margin-left:10px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .mcd-menu {
    width: 200px;
  }
  .mcd-menu li a {
    height:30px;
  }
  .mcd-menu li a i {
    font-size: 22px;
  }
  .mcd-menu li a strong {
    font-size: 12px;
  }
  .mcd-menu li a small {
    font-size: 10px;
  }
  .mcd-menu li a.search input {
    width: 120px;
    font-size: 12px;
  }
  .mcd-menu li a.search buton{
    padding: 8px 10px 9px 10px;
  }
  .mcd-menu li > ul {
    min-width:180px;
  }
  .mcd-menu li:hover > ul {
    min-width:180px;
    left:200px;
  }
  .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
    min-width:150px;
  }
  .mcd-menu li ul li:hover > ul {
    left:180px;
    min-width:150px;
  }
  .mcd-menu li ul li ul li:hover > ul {
    left:150px;
    min-width:150px;
  }
  .mcd-menu li ul a {
    font-size:12px;
  }
  .mcd-menu li ul a i {
    font-size:14px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

  .mcd-menu {
    width: 50px;
  }
  .mcd-menu li a {
    position: relative;
    padding: 12px 16px;
    height:20px;
  }
  .mcd-menu li a small {
    display: none;
  }
  .mcd-menu li a strong {
    display: none;
  }
  .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
    display:block;
    font-size:10px;
    padding:3px 0;
    position:absolute;
    bottom:0px;
    left:0;
    background:#e67e22;
    color:#FFF;
    min-width:100%;
    text-transform:lowercase;
    font-weight:normal;
    text-align:center;
  }
  .mcd-menu li .search {
    display: none;
  }

  .mcd-menu li > ul {
    min-width:180px;
    left:70px;
  }
  .mcd-menu li:hover > ul {
    min-width:180px;
    left:50px;
  }
  .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
    min-width:150px;
  }
  .mcd-menu li ul li:hover > ul {
    left:180px;
    min-width:150px;
  }
  .mcd-menu li ul li ul li > ul {
    left:35px;
    top: 45px;
    border:0;
    border-top:4px solid #e67e22;
  }
  .mcd-menu li ul li ul li > ul:before {
    left:30px;
    top: -9px;
    border:0;
    border-bottom:5px solid #e67e22;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
  }
  .mcd-menu li ul li ul li:hover > ul {
    left:30px;
    min-width:150px;
    top: 35px;
  }
  .mcd-menu li ul a {
    font-size:12px;
  }
  .mcd-menu li ul a i {
    font-size:14px;
  }

}

@media only screen and (max-width: 479px) {
  .mcd-menu {
    width: 50px;
  }
  .mcd-menu li a {
    position: relative;
    padding: 12px 16px;
    height:20px;
  }
  .mcd-menu li a small {
    display: none;
  }
  .mcd-menu li a strong {
    display: none;
  }
  .mcd-menu li a:hover strong,.mcd-menu li a.active strong {
    display:block;
    font-size:10px;
    padding:3px 0;
    position:absolute;
    bottom:0px;
    left:0;
    background:#e67e22;
    color:#FFF;
    min-width:100%;
    text-transform:lowercase;
    font-weight:normal;
    text-align:center;
  }
  .mcd-menu li .search {
    display: none;
  }

  .mcd-menu li > ul {
    min-width:180px;
    left:70px;
  }
  .mcd-menu li:hover > ul {
    min-width:180px;
    left:50px;
  }
  .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
    min-width:150px;
  }
  .mcd-menu li ul li:hover > ul {
    left:180px;
    min-width:150px;
  }
  .mcd-menu li ul li ul li > ul {
    left:35px;
    top: 45px;
    border:0;
    border-top:4px solid #e67e22;
  }
  .mcd-menu li ul li ul li > ul:before {
    left:30px;
    top: -9px;
    border:0;
    border-bottom:5px solid #e67e22;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
  }
  .mcd-menu li ul li ul li:hover > ul {
    left:30px;
    min-width:150px;
    top: 35px;
  }
  .mcd-menu li ul a {
    font-size:12px;
  }
  .mcd-menu li ul a i {
    font-size:14px;
  }

}

</style>
